<template>
	<div class="flex-col w100 h100 overflow-y-auto">
		<div class="list p-l-10 p-r-10 b-r-2 flex m-between" v-for="(item, index) in list" :key="index">
			<div class="list-item" style="width: 40%">
				<img src="@/assets/img/rd/arrowRight.png" alt="" />
				<span class="name m-l-10 ellipsis">{{ item[fileType.name] }}</span>
			</div>
			<div class="list-item" style="width: 20%">
				<span class="name ellipsis" :class="{ warn: item[fileType.val] > 0 }"
					>{{ item[fileType.val] }}{{ item[fileType.val] > 0 ? '个告警' : '' }}</span
				>
			</div>
			<div class="list-item tr" style="width: 20%">
				<span class="name ellipsis">共 {{ item[fileType.total] }} 个</span>
			</div>
		</div>
	</div>
</template>

<script setup>
defineProps({
	list: {
		type: Array,
		required: true
	},
	fileType: {
		type: Object,
		default: () => ({ name: 'modelType', val: 'alarmCount', total: 'total' })
	}
})
</script>

<style lang="scss" scoped>
//带班人员
$height: 32px;
.list {
	background: rgba(62, 99, 176, 0.2);
	cursor: pointer;
	&-item {
		height: $height;
		display: flex;
		align-items: center;
		.name {
			color: rgba(255, 255, 255, 0.6);
		}
		.warn {
			color: rgba(238, 90, 90, 1);
		}
	}

	& + .list {
		margin-top: 10px;
	}
}
</style>
